<script setup>
import {onMounted, getCurrentInstance, watch, ref} from 'vue'
import {message} from 'HeyUI'
import {uuid} from 'framework'

const {table: tableRef} = defineProps({
  table: {
    type: [Object, String]
  }
})
const self = getCurrentInstance()
let table, colCount = ref(0);
const tableColumns = ref([])
const selects = ref([])
const selectAll = ref(true)
const searchText = ref()
const indeterminate = ref(false)
const total=ref(0)
const selectCount=ref(0)
function checkSelectStatus(l) {
  if (l == 0) {
    selectAll.value = false
    indeterminate.value = false
  } else if (l == colCount.value) {
    selectAll.value = true
    indeterminate.value = false
  } else {
    selectAll.value = false
    indeterminate.value = true
  }
}

onMounted(() => {
  if (tableRef) {
    if (tableRef.constructor == String && self.parent.refs) {
      table = self.parent.refs[tableRef]
    } else {
      table = tableRef
    }
    const updateColumnInfo=() => {

      for (let c of table.computeColumns) {
        c.key = uuid()
        //  c.realWidth=c.width
        if (!c.hidden) {
          selects.value.push(c.key)
        }
      }
      tableColumns.value = table.computeColumns
      colCount.value = table.computeColumns.length
      checkSelectStatus(selects.value.length)
      total.value=table.computeColumns.length
      selectCount.value=table.computeColumns.filter(it=>!it.hidden).length
    }
    if(table.computeColumns){
      updateColumnInfo()
    }else{
      watch(() => table.computeColumns, updateColumnInfo)
    }



  }
})

function onChange(e) {
  for (let c of tableColumns.value) {
    if (e.indexOf(c.key) > -1) {
      //被选中
      // c.width=c.realWidth
      c.hidden = false
    } else {
      //被隐藏
      //c.width="0px"
      c.hidden = true
    }
  }
  checkSelectStatus(e.length)
  selectCount.value=table.computeColumns.filter(it=>!it.hidden).length
}

function search(v) {
  if (!v) {
    tableColumns.value = table.computeColumns
  } else {
    tableColumns.value = table.computeColumns.filter(it => it.title.indexOf(v) > -1)
  }
}

function selectAllChange(v) {
  if (v) {
    table.computeColumns.forEach(it => {
      //it.width=it.realWidth
      it.hidden = false
    })
    selects.value = table.computeColumns.map(it => it.key)
  } else {
    table.computeColumns.forEach(it => {
      it.hidden = true
    })
    selects.value = []
  }
  checkSelectStatus(selects.value.length)
  selectCount.value=table.computeColumns.filter(it=>!it.hidden).length
}
</script>
<template>
    <DropdownCustom :toggle-icon="false">
      <Button icon="icon-grid" style="margin-left: 4px" icon-circle/>
      <template #content>
        <div class="table-control-drop">
          <div style="padding:10px;background-color:#F6FBFF;display: flex;align-items: center;">
            <Checkbox :checked="selectAll" :indeterminate="indeterminate" @change="selectAllChange" style="flex:1">
              显示
            </Checkbox>
            <span class="count">{{ selectCount }}/{{total}}</span>
          </div>
          <div style="padding:13px" v-if="colCount>6">
            <Search
                v-model="searchText"
                position="end"
                trigger-type="input"
                placeholder="请输入菜单名称"
                @search="search"
            />
          </div>

          <div style="height: 200px;overflow-y: auto;padding: 0 13px 13px;">
            <Checkbox :datas="tableColumns" v-model="selects" titleName="title" @change="onChange"></Checkbox>
          </div>
        </div>
      </template>

    </DropdownCustom>
</template>

<style scoped>
.table-control-drop {
  /*border: #D9D9D9 1px solid;*/
  /*border-radius: 8px;*/
  /*overflow: hidden;*/
  padding-bottom:13px;
}

.table-control-drop :deep(.h-checkbox) {
  display: flex;
  flex-direction: column;
  margin-bottom: -10px;
}

.table-control-drop :deep(.h-checkbox .h-checkbox-label) {
  margin-bottom: 10px;
}
.table-control-drop .count{
  color:#BFBFBF;
  font-size: 14px;
}
</style>
